/*
 * Copyright 2020, GeoSolutions Sas.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */


// **************
// Theme
// **************

#gn-components-theme(@theme-vars) {
    .gn-hero .gn-search-bar {
        .color-var(@theme-vars[main-color]);
        .background-color-var(@theme-vars[main-bg]);
    }
    .gn-hero {
        .color-var(@theme-vars[jumbotron-color]);
        .background-color-var(@theme-vars[jumbotron-bg]);
    }
}

// **************
// Layout
// **************

.gn-hero {
    position: relative;
    .jumbotron {
        max-width: @gn-hero-max-width;
        margin: auto;
        text-align: center;
        .gn-hero-description {
            word-break: break-word;
            font-size: @font-size-base * 1.5; font-weight: lighter;
            h1 { font-size: @font-size-base * 6; font-weight: lighter; }
            h2 { font-size: @font-size-base * 5.5; font-weight: lighter; }
            h3 { font-size: @font-size-base * 5; font-weight: lighter; }
            h4 { font-size: @font-size-base * 4; font-weight: lighter; }
            h5 { font-size: @font-size-base * 3; font-weight: lighter; }
            h6 { font-size: @font-size-base * 1.5; font-weight: lighter; }
            p:not(.gn-hero-tools) { font-size: @font-size-base * 1.5; font-weight: lighter; }
        }
    }
    .gn-carousel {
        width: 100%;
        max-width: 100%;
        padding: 0;
        
        .carousel-inner .item {
            min-height: 400px;
            img {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

@media screen and (max-width: @screen-xs) {
  .gn-hero .jumbotron .gn-hero-description {
            word-break: break-word;
            font-size: @font-size-base;
            h1 { font-size: @font-size-base * 3.5; }
            h2 { font-size: @font-size-base * 3; }
            h3 { font-size: @font-size-base * 2.5; }
            h4 { font-size: @font-size-base * 2; }
            h5 { font-size: @font-size-base * 1.5; }
            h6 { font-size: @font-size-base; }
            p:not(.gn-hero-tools) { font-size: @font-size-base; }
        }
}